import React, { Component } from 'react';
import { context,Provider,Consumer } from './testContext'

console.log('context:',context)

function A() {
    return (
        <div>
            A组件
            <B></B>
        </div>
    )
}

function B() {
    return (
        <div>
            B组件
            <C></C>
        </div>
    )
}

function C() {
    return (
        <div>
            C组件
            <D></D>
        </div>
    )
}

/*
function D() {
    return (
        <div>
            <Consumer>
                {value => {
                    return (
                        <div>{ value }</div>
                    )
                 } }
            </Consumer>
            D组件</div>
    )
}
*/

class D extends Component {

   static contextType = context
  

    render() {
        return (
            <div>
                <h2>D组件</h2>
                <Consumer>
                    {({ num, add }) => { 
                        return <div>
                            <span>{num}</span>
                            <button onClick={ add  }>修改</button>
                        </div>
                    } }
               </Consumer>
            </div>
        )
    }
}




export default class App extends Component {
    constructor(props) {
        super(props)

        this.state = {
            count:10
        }

        this.increment=this.increment.bind(this)
    }

  //递增
  increment(){
      
      this.setState({
          count:++this.state.count
      })
  }
    
  //递减
    render() {
      const {count}=this.state
    return (
        <div>
            <h2>context组件通讯--{count}</h2>
            {/* <button onClick={ this.increment.bind(this) }>递增</button> */}
            <Provider value={ { num:count,add:this.increment} }>
                <A></A>
            </Provider>
            
        </div>
    );
  }
}
